<template>
  <div class="app-carmodel-details">
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item,index) in slidebox" :key="index">
        <img :src="item.thumb">
      </mt-swipe-item>
    </mt-swipe>


    <div class="module-info">
      <div class="info-header">基本信息</div>

      <mt-cell class="info-item" title="查询代码">958958989898</mt-cell>
      <mt-cell class="info-item" title="厂家">一汽大众</mt-cell>
      <mt-cell class="info-item" title="品牌">大众</mt-cell>
      <mt-cell class="info-item" title="车型">POLO</mt-cell>
      <mt-cell class="info-item" title="VIN年份">2018</mt-cell>
      <mt-cell class="info-item" title="车型代码">SVMMMM</mt-cell>
      <mt-cell class="info-item" title="底盘号">A04（9N）</mt-cell>
      <mt-cell class="info-item" title="发动机型号">BCC</mt-cell>
      <mt-cell class="info-item" title="排量">1.4L</mt-cell>
      <mt-cell class="info-item" title="车身形式">两厢</mt-cell>
      <mt-cell class="info-item" title="车门数">五门</mt-cell>

    </div>
  </div>
</template>

<script>
  import { Header,Swipe, SwipeItem,MessageBox } from 'mint-ui';
export default {
  data () {
    return {
      slidebox:[
        {
          id:1,
          thumb:'static/img/1.jpg'
        },
        {
          id:2,
          thumb:'static/img/4.jpg'
        }
      ],
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .app-carmodel-details{
    padding:0 0 24px;
  }
  .app-carmodel-details .mint-swipe{
    background: #fff;
    height:270px;
    text-align: center;
  }
  .app-carmodel-details .mint-swipe img{
    height: 100%;
  }

  .app-carmodel-details .module-info .info-header{
    background-color:#f5f5f5;
    position: relative;
    display: block;
    padding:8px 12px;
    font-size:15px;
    color: #666;
  }
  .app-carmodel-details .module-info .info-header:before{
    background:#007EE5;
    position: relative;
    top:-2px;
    display:inline-block;
    vertical-align: middle;
    width:3px;
    height:14px;
    content: '';
    margin-right:6px;
  }
  .app-carmodel-details .module-info .info-item{
    min-height: 48px;
  }
  .app-carmodel-details .module-info .info-item .mint-cell-wrapper{
    font-size: 16px;
  }
</style>
